<template>
    <div :id="id" class="button-wrap">
        <button class="v-button" v-if="element.data" :style="{ color: element.style.color, 
            fontWeight: element.style.fontWeight, 
            textAlign: element.style.textAlign, 
            verticalAlign: element.style.verticalAlign,
            fontFamily: element.style.fontFamily ? element.style.fontFamily : 'inherit',
            lineHeight: element.style.lineHeight + 'px',
            letterSpacing: element.style.letterSpacing + 'px',
            fontSize: element.style.fontSize + 'px',
            textShadow: element.style.textShadow ? `${element.style.textShadow.level}px ${element.style.textShadow.vertical}px ${element.style.textShadow.blur}px ${element.style.textShadow.color}` : ''
        }">
            {{ element.data.text }}
        </button>
    </div>
</template>

<script>
import register from '@/js/main/register.js';

export default {
    props: {
        element: {
            type: Object
        },
        id: {
            type: String
        },
        pageList: {
            type: Array
        },
        mode: {
            type: Number
        }
    },
    methods: {},
    created() {
        register.addComponent(this);
    },
    destroyed() {
        register.removeComponent(this);
    }
};
</script>

<style lang="scss" scoped>
.button-wrap {
    display: table;
}
.v-button {
    display: table-cell;
    cursor: pointer;
    background: transparent;
    border: none;
    -webkit-appearance: none;
    outline: 0;
    width: 100%;
    height: 100%;
    &:active {
        border-color: none;
        outline: 0;
    }

    &:hover {
        background-color: transparent;
    }
}
</style>